<template>
  <view class="container-wallet">
    <header @click="$goPath(1)">
      <image src='/static/images/right-white.png' mode='aspectFit|aspectFill|widthFix' alt="" />
      <view>钱包</view>
    </header>

    <section>
      <view class="sect-box">
        <view class='sect-head'>
          <view class='avater'>
            <image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/default-avatar.png' v-if="!userDetail.avatar" mode='widthFix' alt="" />
            <image :src="userDetail.avatar" v-else mode='aspectFit|aspectFill|widthFix' alt="" />
          </view>
          <view class='userInfo'>
            <view class='userInfo-name'>{{ userDetail.username }}</view>
            <view class='userInfo-id'>ID:{{ userDetail.userId }} 
              <text style="color: red;padding-left: 30rpx;">
              总津贴：{{ totalProfit }}
            </text>
          </view>
          </view>
          <view class='userInfo-level'> {{ userDetail.levelName }} </view>
        </view>

        <view class='sect-content'>
          <view class='sect-content-head'>
            <view>
              <view>
                <view>我的余额(元)</view>
                <view>{{ userDetail.availableBalance }}</view>
              </view>
              <view>
                <view>
                  <view style="font-size: 14px;">兜兜卡</view>
                  <view>{{ ddkList.length }}</view>
                </view>
              </view>
            </view>

            <view>
              <view>
                <view>待结算</view>
                <view>{{ userDetail.freezeBalance }}</view>
              </view>
              <view>
                <view>可提现</view>
                <view>{{ userDetail.availableBalance }}</view>
              </view>
            </view>
          </view>
          <view class='sect-content-foot'>
            <view @click="$goPath(2, `/pagesA/pocketShop/mine/recharge`)">充值</view>
			<!-- #ifndef MP-WEIXIN -->
			<view @click="$goPath(2, `/pagesA/pocketShop/mine/withdrawal?userDetail=${JSON.stringify(userDetail)}`)">提现
			</view>
			<!-- #endif -->
          </view>
        </view>

        <view class='sect-scrollBox'>
          <view class='sect-billTitle'>账单明细</view>
          <view class="time">
            <view class="example-body">
              <uni-datetime-picker v-model="range" type="daterange" @change="changeTime" />
            </view>
          </view>

          <view class='sect-bill' v-if="billList.length > 0">
            <view class='bills-item' v-for="(item, index) in billList" :key="index">
              <view>
                <view class='consume-type'>{{ item.remark }}</view>
                <view class='consume-time'>{{ item.createTime }}</view>
              </view>
              <view class='green' v-if="item.type == 'add'">+{{ item.amount }}元</view>
              <view class='red' v-else>{{ item.amount }}元</view>
            </view>
          </view>
          <view class="empty" v-else>
            <image class="image" mode="aspectFit|aspectFill|widthFix" src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/empty.png" />
            <view class="text">
              暂无数据
            </view>

          </view>

        </view>
      </view>
    </section>
  </view>
</template>
<script>
import { getUserInfo } from '@/common/auth';
export default {
  components: {
  },
  data() {
    return {
      userDetail: {},
      ddkList: {},
      billList: [],
      pageCurrent: 1,
      total: 0,
      range: [],
      startTime: '',
      endTime: '',
      totalProfit:0
    }
  },
  onLoad(options) {
    let {totalProfit} = options
    this.totalProfit = totalProfit
    let myDate = new Date();
    let year = myDate.getFullYear() // 当前年份四位数
    let month = myDate.getMonth() + 1 < 10 ? '0' + (myDate.getMonth() + 1) : myDate.getMonth() + 1 // 月份为0-11，在10月前更改为01格式
    this.endTime = year + '-' + month + '-' + myDate.getDate() + ' 23:59:00'
    this.startTime = this.$tools.getBeforeDate(10) + ' 00:00:00'
    this.range = [this.startTime,this.endTime]
    this.getCardList()
    this.getBalanceBills()
  },
  methods: {
    changeTime(e) {
      console.log('maskClick事件:', e);
      this.startTime = e[0]
      this.endTime = e[1]
      this.getBalanceBills()
    },
    async getCardList() {
      let info = getUserInfo()
      this.userDetail = info
      let result = await this.$request.cardFindByList({ userId: info.userId })
      this.ddkList = result.data;
    },
    //余额账单
    async getBalanceBills() {
      uni.showLoading({
        title: '加载中...'
      });
      let info = getUserInfo()
      const { pageCurrent } = this;
      const param = {
        page: { current: pageCurrent, size: 40 },
        query: { userId: info.userId, endTime: this.endTime, startTime: this.startTime }
      }
      let result = await this.$request.userBalanceFlowingFindByPage(param)
      const { records, total } = result.data;
      if (records.length > 0) {
        if (pageCurrent > 1) {
		  let newList = billList.concat(records)
          newList.map(item => {
            item.type = Math.sign(item.amount) == -1 ? 'minus' : 'add';
          });
          this.billList = newList;
        } else {
          records.map(item => {
            item.type = Math.sign(item.amount) == -1 ? 'minus' : 'add';
          });
          this.billList = records;
        }
      }
      if (pageCurrent == 1 && records.length == 0) {
        this.billList = [];
      }
      this.total = total;
      uni.hideLoading();
    },
    //账单
    goBill() {
      this.$goPath(2, `/pagesA/pocketShop/mine/bills`)
    },
  },
  onReachBottom() {
    let { pageCurrent, total, billList } = this;
    if (total > billList.length) {
      pageCurrent++;
      this.pageCurrent = pageCurrent;
      this.getBalanceBills();
    } else {
      uni.showToast({ title: '暂无更多', icon: 'none' });
    }
  }

}
</script>

<style lang="scss" scoped>
.container-wallet {
  width: 100%;
  height: 100vh;
  font-size: 28rpx;
  font-family: 'PingFang SC-Medium';
  background-color: #FED14E;
  overflow-y: hidden;

  header {
    width: 100%;
    padding: 120rpx 24rpx 60rpx;
    border-radius: 0 0 40rpx 40rpx;
    box-sizing: border-box;
    color: #fff;
    background-color: #32B499;
    background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    font-size: 36rpx;
    font-family: 'PingFang SC-Bold';
    display: flex;
    align-items: center;

    image {
      width: 16rpx;
        height: 28rpx;
        display: block;
        margin-right: 12rpx;
    }
  }

  section {
    height: 100%;
    position: relative;
    top: -50rpx;
    padding: 0 24rpx;
    box-sizing: border-box;

    .sect-box {
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 40rpx;
      padding: 24rpx;
      padding-bottom: 48rpx;
      box-sizing: border-box;
      overflow-y: auto;

      .sect-head {
        display: flex;
        align-items: center;

        .avater {
          width: 3.75rem;
          height: 3.75rem;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50% 50%;
            box-sizing: border-box;
          }
        }

        .userInfo {
          flex: 1;
          color: #333;
          margin-left: 24rpx;

          .userInfo-name {
            font-family: 'PingFang SC-Bold';
            font-size: 32rpx;
          }

          .userInfo-id {
            font-size: 28rpx;
            font-family: 'PingFang SC-Regular';
          }
        }

        .userInfo-level {
          line-height: 32rpx;
          border-radius: 20rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24rpx;
          padding: 4rpx 8rpx;
          color: #fff;
          background-color: #FED14E;
          font-family: 'PingFang SC-Regular';
        }

      }
    }

    .sect-content {
      width: 100%;
      background: rgba(66, 223, 190, 0.1);
      margin-top: 24rpx;
      border-radius: 16rpx;

      .sect-content-head {
        width: 100%;
        height: 9.5rem;
        background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/wallet-bgImg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #fff;
        font-family: 'PingFang SC-Medium';
        padding: 24rpx 2rem;
        box-sizing: border-box;
      }
    }

    .sect-content-foot {
      display: flex;
      padding: 20rpx;
      box-sizing: border-box;

      view {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'PingFang SC-Medium';
        font-size: 32rpx;
      }

      view:first-child {
        border-right: 2rpx solid #eee;
      }
    }

    .sect-scrollBox {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;

      .sect-billTitle {
        font-size: 32rpx;
        background-color: #fff;
        margin-top: 24rpx;
        border-radius: 16rpx 16rpx 0 0;
      }
      .time{
        padding-top: 20rpx;
      }
      .sect-bill {
        flex: 1;
        background-color: #fff;
        overflow-y: auto;

        .bills-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
          padding: 24rpx 0;
          box-sizing: border-box;
        }

      }

      .empty {
        width: 200rpx;
        height: 260rpx;
        margin: 150rpx auto;

        .image {
          width: 200rpx;
          height: 200rpx;
        }

        .text {
          line-height: 60rpx;
          text-align: center;
        }
      }

    }

  }

}


.container-wallet .sect-content-head>view {
  display: flex;
  justify-content: space-between;
}

.container-wallet .sect-content-head>view:first-child {
  margin-bottom: 2.2rem;
}

.container-wallet .sect-content-head>view>view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container-wallet .sect-content-head>view .sect-content-head-withdrawal {
  width: 160rpx;
  height: 56rpx;
  background: #FFFFFF;
  border-radius: 32rpx;
  font-size: 32rpx !important;
  font-family: 'PingFang SC-Medium' !important;
  color: #32B499;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
}

.container-wallet .sect-content-head>view>view:first-child {
  align-items: flex-start;
}

.container-wallet .sect-content-head>view>view view:last-child {
  font-size: 40rpx;
  font-family: 'PingFang SC-Bold';
}

.container-wallet .sect-content-head>view:last-child>view view:last-child {
  font-weight: 400;
  font-family: 'PingFang SC-Medium';
  font-size: 32rpx;
}


.container-wallet .bills-item:last-child {
  border: 0;
}

.container-wallet .bills-item .consume-time {
  font-family: 'DIN-Regular';
  color: #999;
}

.container-wallet .bills-item>view:first-child {
  flex: 1;
  padding-right: 24rpx;
  box-sizing: border-box;
}

.container-wallet .bills-item>view:last-child {
  font-family: 'DIN-Medium';
  font-size: 32rpx;
}

.container-wallet .bills-item .green {
  color: #32B499;
}

.container-wallet .bills-item .red {
  color: #EA5F5F;
}
</style>